<template>
	<div class="com-link flex">
		<div class="flex link-title" v-if="fieldStatus === 'view'">
			<div class="icon">
				<ComIcon v-if="icon" :icon="icon" style="font-size: 10px" />
				<span v-else-if="labelShort">{{ labelShort }}</span>
				<span v-else>{{ text?.[0] }}</span>
			</div>
			<p>{{ text }}</p>
		</div>
		<div class="flex mr-5 icon-select" style="width: 100%; gap: 8px" v-else @click.stop ref="target">
			<ComIconSelect v-model="form.ico" @change="handleUpdate" ref="iconSelectRef"  />
			<a-input class="f1" v-model="form.name" size="mini" @keyup.enter="handleUpdate" :disabled="inputDisabled" :placeholder="$t('dataModel.dataModel')" />
		</div>
		<template v-if="!disabled">
			<div class="right-icon" v-if="fieldStatus === 'view'" @click.stop >
				<ComIcon v-if="edit" @click.stop="fieldStatus = 'edit'" icon="EachApp_a-bianji1"></ComIcon>
				<icon-launch v-else style="color: #999999" />
			</div>
		</template>
	</div>
</template>

<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";

const props = defineProps({
	text: {
		type: String,
		default: ""
	},
	disabled: {
		type: Boolean,
		default: false
	},
	icon: {
		type: String,
		default: ""
	},
	labelShort: {
		type: String,
		default: ""
	},
	status: {
		type: String,
		default: "view"
	},
	edit: {
		type: Boolean,
		default: false
	},
	inputDisabled: {
		type: Boolean,
		default: false
	}
});

const target = ref(null)
const iconSelectRef = ref(null)
onClickOutside(target, (event) => {
	if(!iconSelectRef.value.visibleFlag){
		fieldStatus.value = "view";
	}
});

const form = ref({
	ico: "",
	name: ""
});

watch(
	() => [props.icon, props.text],
	(data) => {
		form.value = {
			ico: data[0],
			name: data[1]
		};
	},
	{ immediate: true }
);

const emit = defineEmits(["update:status", "update:icon", "update:text", "update"]);
const fieldStatus = computed({
	get: () => {
		return props.status;
	},
	set: (val) => {
		emit("update:status", val);
	}
});

const handleUpdate = () => {
	emit("update", form.value);
	fieldStatus.value = "view";
};
</script>

<style scoped lang="scss">
.com-link {
	width: 100%;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	&:hover .right-icon {
		opacity: 1;
	}
	.link-title {
		background-color: #f5f5f5;
		border-radius: 6px;
		// padding: 5px 8px;
		color: #333333;
		gap: 4px;
		&:hover {
			background-color: #e9e9e9;
		}
	}
	.icon {
		padding: 2px;
		background-color: #ebf4ff;
		border-radius: 4px;
		font-size: 10px;
		text-align: center;
		color: #666666;
	}
	.right-icon {
		border-radius: 6px;
		width: 24px;
		height: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		transition: 0.1s;
		&:hover {
			background-color: #e9e9e9;
		}
	}
}
:deep(.icon-select){
	.com-icon{
		width: 24px;
		height: 24px;
	}
}
</style>
